<template>
  <div>
    <div class="operator-area">
    </div>
    <div class="table-area">
      <a-row :gutter="8">
        <a-col :span="16">
          <a-table
            rowKey="menuId"
            bordered
            :key="tableSetting.key"
            :columns="tableColumns"
            :loading="tableSetting.loading"
            :dataSource="tableDataSource"
            :pagination="false"
            :rowSelection="{
              selectedRowKeys: tableSetting.selectedRowKeys,
              onChange: onTabalRowChange
            }">
              <template slot="icon" slot-scope="text">
                <a-icon v-if="text" :type="text"></a-icon>
              </template>
          </a-table>
        </a-col>
        <a-col :span="8">
          <a-card :bodyStyle="{ height: '500px', overflow: 'auto' }">
            <a-row>
              <a-col :span="24">
                <span>表格数据格式：</span>
                <pre>{{ tableDataSource }}</pre>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>

export default {
  name: "FlodRowTable",
  components: {
  },
  mounted () {
  },
  data () {
    return {
      queryParams: {
        name: "",
        code: "",
        type: "",
        lxnd: "",
        timeRange: [],
        createTime: ""
      },
      tableSetting: {
        key: +new Date(),
        loading: false,
        pagination: {},
        selectedRowKeys: [],
        editingRecordIndex: ""
      },
      tableColumns: [
        {
          menuText: "菜单名称",
          dataIndex: "menuText",
          width: 250,
          align: "left",
        },
        {
          title: "图标",
          dataIndex: "icon",
          width: 100,
          scopedSlots: { customRender: "icon" }
        },
        {
          title: "菜单类型",
          dataIndex: "type",
          width: 100,
          customRender: (text, record, index) => {
            switch (text) {
              case '0':
                return <a-tag color="cyan"> 菜单 </a-tag>
              case '1':
                return <a-tag color="pink"> 按钮 </a-tag>
              default: 
                return text
            }
          },
        },
        {
          title: "地址",
          dataIndex: "menuPath",
          width: 250,
          align: "left",
        },
        {
          title: "组件",
          dataIndex: "component",
          width: 200
        },
        // {
        //   title: "创建时间",
        //   dataIndex: "createTime",
        //   width: 150
        // },
        // {
        //   title: "修改时间",
        //   dataIndex: "modifyTime",
        //   width: 150,
        // }
      ],
      tableDataSource: [
        {
          menuId: 1,
          menuText: "系统管理",
          menuPath: "/system",
          component: "PageView",
          icon: "dashboard",
          parentId: 0,
          type: "0",
          order: "1",
          hasParent: false,
          hasChildren: true,
          editVisible: false,
          createTime: "2017-12-28 00:39:07",
          modifyTime: "2019-01-05 19:13:14",
          children: [
            {
              menuId: 2,
              menuText: "用户管理",
              menuPath: "/system/user",
              permission: "user:view",
              component: "system/user/User",
              parentId: 1,
              type: "0",
              order: "1",
              hasParent: true,
              hasChildren: false,
              editVisible: false,
              createTime: "2017-12-28 00:39:07",
              modifyTime: "2019-01-05 19:13:14",
              children: [
                {
                  menuId: 8,
                  menuText: "用户添加",
                  menuPath: "",
                  permission: "user:add",
                  component: "",
                  parentId: 1,
                  type: "1",
                  order: "1",
                  hasParent: true,
                  hasChildren: false,
                  editVisible: false,
                  createTime: "2017-12-28 00:39:07",
                  modifyTime: "2019-01-05 19:13:14",
                },
                {
                  menuId: 9,
                  menuText: "用户修改",
                  menuPath: "",
                  permission: "user:edit",
                  component: "",
                  parentId: 1,
                  type: "1",
                  order: "2",
                  hasParent: true,
                  hasChildren: false,
                  editVisible: false,
                  createTime: "2017-12-28 00:39:07",
                  modifyTime: "2019-01-05 19:13:14",
                }
              ]
            },
            {
              menuId: 3,
              menuText: "角色管理",
              menuPath: "/system/roles",
              permission: "roles:view",
              component: "system/roles/roles",
              parentId: 1,
              type: "0",
              order: "1",
              hasParent: true,
              hasChildren: false,
              editVisible: false,
              createTime: "2017-12-28 00:39:07",
              modifyTime: "2019-01-05 19:13:14",
            },
            {
              menuId: 4,
              menuText: "菜单管理",
              menuPath: "/system/menu",
              permission: "menu:view",
              component: "system/menu/menu",
              parentId: 1,
              type: "0",
              order: "1",
              hasParent: true,
              hasChildren: false,
              editVisible: false,
              createTime: "2017-12-28 00:39:07",
              modifyTime: "2019-01-05 19:13:14",
            }
          ]
        },
        {
          menuId: 5,
          menuText: "系统监控",
          icon: "appstore-o",
          menuPath: "/monitor",
          component: "PageView",
          parentId: 0,
          type: "0",
          order: "1",
          hasParent: false,
          hasChildren: true,
          editVisible: false,
          createTime: "2017-12-28 00:39:07",
          modifyTime: "2019-01-05 19:13:14",
          children: [
            {
              menuId: 6,
              menuText: "在线用户",
              menuPath: "/monitor/online",
              permission: "user:online",
              component: "monitor/Online",
              parentId: 1,
              type: "0",
              order: "1",
              hasParent: true,
              hasChildren: false,
              editVisible: false,
              createTime: "2017-12-28 00:39:07",
              modifyTime: "2019-01-05 19:13:14",
            },
            {
              menuId: 7,
              menuText: "系统信息",
              menuPath: "/monitor/system",
              permission: "user:system",
              component: "monitor/System",
              parentId: 1,
              type: "0",
              order: "1",
              hasParent: true,
              hasChildren: false,
              editVisible: false,
              createTime: "2017-12-28 00:39:07",
              modifyTime: "2019-01-05 19:13:14",
            }
          ]
        }
      ]
    }
  },
  methods: {
    /** 表格前置选中框选择 */
    onTabalRowChange (selectedRowKeys) {
      console.log('selectedRowKeys onTabalRowChange: ', selectedRowKeys)
      this.tableSetting.selectedRowKeys = selectedRowKeys;
    }
  }
}
</script>

<style lang="less">
</style>
